<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <!-- Title -->
    <title>Home</title>

    <!-- Favicon Ico -->
    <link rel="shortcut icon" href="images/favicon.ico">

    <!-- =============================
                stylesheets
    ================================== -->

    <!-- Normalize And Bootstrap -->
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">

    <!-- Google Font  -->
    <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Raleway:600,700,400,300' rel='stylesheet' type='text/css'>

    <!-- Font Icons -->
    <link rel="stylesheet" href="css/font-awesome/css/font-awesome.min.css" />

    <!-- Plugin Default Stylesheets -->
    <link rel="stylesheet" href="css/magnific-popup.css">
    <link rel="stylesheet" href="css/slider-pro.css">
    <link rel="stylesheet" href="css/owl.carousel.css">
    <link rel="stylesheet" href="css/owl.theme.css">
    <link rel="stylesheet" href="css/owl.transitions.css">
    <link rel="stylesheet" href="css/animate.css">

    <!-- Main Stylesheet -->
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/responsive.css" />
    <link rel="stylesheet" href="css/color.css" id="colors" />

    <!--[if lt IE 9]>
        <script src="js/html5shiv.min.js"></script>
        <script src="js/respond.min.js"></script>
        <script type="text/javascript" src="js/selectivizr.js"></script>
    <![endif]-->
</head>

<body>
    <!-- Preloader -->
    <div class="preloader">
        <div class="status"></div>
    </div>

    <!-- =============================
                    Header
    ================================== -->
    <header>
        <!-- Navigation Menu start-->
        <nav class="navbar blete-main-menu" role="navigation">
            <div class="container">

                <!-- Navbar Toggle -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>

                    <!-- Logo -->
                    <a class="navbar-brand" href="index.html"><img class="logo" id="logo" src="images/logo.png" alt="logo"></a>

                </div>
                <!-- Navbar Toggle End -->

                <!-- navbar-collapse start-->
                <div id="nav-menu" class="navbar-collapse collapse" role="navigation">
                    <ul class="nav navbar-nav blete-menu-wrapper">
                        <li class="active">
                            <a href="index.html">Home</a>
                        </li>
                        <li>
                            <a href="portfolio.html">Portfolio</a>
                        </li>
                        <li>
                            <a href="portfolio2.html">Portfolio V2</a>
                        </li>
                        <li>
                            <a href="pricing-table.html">Pricing Table</a>
                        </li>
                        <li>
                            <a href="progress.html">Progress Bar</a>
                        </li>
                        <li>
                            <a href="contact.html">Contact Us</a>
                        </li>
                    </ul>
                </div>
                <!-- navbar-collapse end-->

            </div>
        </nav>
        <!-- Navigation Menu end-->
    </header>
    <!-- Header End -->


    <!-- =============================
                Main Slider
    ================================== -->
    <section class="slider-pro blete-slider" id="blete-slider">
        <div class="sp-slides">

            <!-- Slides -->
            <div class="sp-slide blete-main-slides">
                <div class="blete-img-overlay"></div>

                <img class="sp-image" src="images/img-header/slider-img-1.jpg" alt="Slider 1"/>

                <h1 class="sp-layer blete-slider-text-big"
                data-position="center" data-show-transition="left" data-hide-transition="right" data-show-delay="1500" data-hide-delay="200">
                Responsive
                </h1>

                <p class="sp-layer"
                data-position="center" data-vertical="15%" data-show-delay="2000" data-hide-delay="200" data-show-transition="left" data-hide-transition="right">
                    <span class="blete-highlight-text">Creative</span> lorem ipsum dolor
                </p>
            </div>
            <!-- Slides End -->

            <!-- Slides -->
            <div class="sp-slide blete-main-slides">
            <div class="blete-img-overlay"></div>
                <img class="sp-image" src="images/img-header/slider-img-2.jpg" alt="Slider 2"/>

                <h1 class="sp-layer blete-slider-text-big"
                 data-position="center" data-show-transition="left" data-hide-transition="right" data-show-delay="1500" data-hide-delay="200">
                   Clean Design
                </h1>

                <p class="sp-layer"
                 data-position="center" data-vertical="15%" data-show-delay="2000" data-hide-delay="200" data-show-transition="left" data-hide-transition="right">
                    <span class="blete-highlight-text">Clean</span>lorem ipsum dolor 
                </p>
            </div>
            <!-- Slides End -->

            <!-- Slides -->
            <div class="sp-slide blete-main-slides">
                <div class="blete-img-overlay"></div>

                <img class="sp-image" src="images/img-header/slider-img-3.jpg" alt="Slider 3"/>

                <h1 class="sp-layer blete-slider-text-big"
                data-position="center" data-show-transition="left" data-hide-transition="right" data-show-delay="1000" data-hide-delay="200">
                    Amazing 
                </h1>

                <p class="sp-layer"
                data-position="center" data-vertical="15%" data-show-delay="2000" data-hide-delay="200" data-show-transition="left" data-hide-transition="right">
                   <span class="blete-highlight-text">Amazing</span> lorem ipsum dolor
                </p>

            </div>
            <!-- Slides End -->

        </div>
    </section>
    <!-- Main Slider End -->

    <!-- =============================
                    About Section
    ================================== -->
    <section id="about" class="blete-section-wrapper">
        <div class="container">
            <div class="row">

                <!-- Section Header -->
                <div class="col-md-12 col-sm-12 col-xs-12 blete-section-header wow fadeInDown">
                    <h2>ABOUT <span class="blete-highlight-text">SERVICE</span></h2>
                    <div class="blete-section-divider"></div>
                    <p class="col-md-8 col-sm-10 col-xs-12 col-md-offset-2 col-sm-offset-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente veniam, rerum provident repudiandae, ducimus beatae voluptatem ullam delectus eum excepturi quaerat, molestias accusamus. Repellendus, laboriosam recusandae! Illo quod voluptates corrupti!</p>
                </div>
                <!-- Section Header End -->

                <!-- What We Do -->
                <div class="blete-what-we-do">

                    <div class="col-md-3 col-sm-3 col-xs-12 blete-blurb-round-icon wow bounceInLeft">
                        <div class="blete-icon">
                            <i class="fa fa-key"></i>
                        </div>
                        <h3>WEB SECURITY</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero praesentium quam nulla, porro nemo.</p>
                    </div>

                    <div class="col-md-3 col-sm-3 col-xs-12 blete-blurb-round-icon wow bounceInLeft" data-wow-delay=".5s">
                        <div class="blete-icon">
                            <i class="fa fa-laptop"></i>
                        </div>
                        <h3>WEB RESPONSIVE</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat hic facilis dolores nam.</p>
                    </div>

                    <div class="col-md-3 col-sm-3 col-xs-12 blete-blurb-round-icon wow bounceInRight" data-wow-delay=".5s">
                        <div class="blete-icon">
                            <i class="fa fa-search"></i>
                        </div>
                        <h3>SEO OPTIMATION</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae illo nesciunt quas perferendis.</p>
                    </div>

                    <div class="col-md-3 col-sm-3 col-xs-12 blete-blurb-round-icon wow bounceInRight" data-wow-delay=".5s">
                        <div class="blete-icon">
                            <i class="fa fa-html5"></i>
                        </div>
                        <h3>HTML5 TEMPLATE</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, sit, voluptate! Debitis sint ipsum ea aliquid.</p>
                    </div>

                </div>
                <!-- What We Do End -->

            </div>
        </div>
    </section>
    <!-- About Section End -->


    <!-- =============================
                    Featuers Section
    ================================== -->
    <section id="features" class="blete-section-wrapper blete-features-section" data-stellar-background-ratio="0.5">
        <div class="blete-parallax-overlay"></div>
        <div class="container">
            <div class="row">

                <!-- Section Header -->
                <div class="col-md-12 col-sm-12 col-xs-12 blete-section-header blete-section-header-parallax wow slideInDown">
                    <h2>OUR <span class="blete-highlight-text">FEATURES</span></h2>
                    <div class="blete-section-divider"></div>
                    <p class="col-md-8 col-sm-10 col-xs-12 col-md-offset-2 col-sm-offset-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae quibusdam debitis earum voluptas autem error incidunt aspernatur non placeat obcaecati possimus sequi, labore et rem alias, cupiditate vitae provident veritatis.</p>
                </div>
                <!-- Section Header End -->

                <!-- Features -->
                <div class="blete-features">
                    <div class="col-md-4 col-sm-4 col-xs-12 wow rotateInDownLeft">

                        <div class="blete-blurb-icon-left-square">
                            <div class="blete-icon">
                                <i class="fa fa-plus"></i>
                            </div>

                            <div class="blete-blurb-text">
                                <h3>Free Update</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                            </div>
                        </div>

                        <div class="blete-blurb-icon-left-square">
                            <div class="blete-icon">
                                <i class="fa fa-laptop"></i>
                            </div>

                            <div class="blete-blurb-text">
                                <h3>Clean Design</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing Voluptatum.</p>
                            </div>
                        </div>

                        <div class="blete-blurb-icon-left-square">
                            <div class="blete-icon">
                                <i class="fa fa-smile-o"></i>
                            </div>

                            <div class="blete-blurb-text">
                                <h3>Free Smile Support</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing At.</p>
                            </div>
                        </div>

                    </div>

                    <div class="col-md-4 col-sm-4 col-xs-12 wow slideInUp" data-wow-duration="1s">

                        <div class="blete-blurb-icon-left-square">
                            <div class="blete-icon">
                                <i class="fa fa-file-code-o"></i>
                            </div>

                            <div class="blete-blurb-text">
                                <h3>Clean Code</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro.</p>
                            </div>
                        </div>

                        <div class="blete-blurb-icon-left-square">
                            <div class="blete-icon">
                                <i class="fa fa-font"></i>
                            </div>

                            <div class="blete-blurb-text">
                                <h3>Font Awesome</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elitItaque.</p>
                            </div>
                        </div>

                        <div class="blete-blurb-icon-left-square">
                            <div class="blete-icon">
                                <i class="fa fa-mobile"></i>
                            </div>

                            <div class="blete-blurb-text">
                                <h3>Mobile Responsive</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                            </div>
                        </div>

                    </div>

                    <div class="col-md-4 col-sm-4 col-xs-12 wow rotateInDownRight">

                        <div class="blete-blurb-icon-left-square">
                            <div class="blete-icon">
                                <i class="fa fa-laptop"></i>
                            </div>

                            <div class="blete-blurb-text">
                                <h3>Material Design</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                            </div>
                        </div>

                        <div class="blete-blurb-icon-left-square">
                            <div class="blete-icon">
                                <i class="fa fa-comments"></i>
                            </div>

                            <div class="blete-blurb-text">
                                <h3>24/7 Free Chat Support</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                            </div>
                        </div>

                        <div class="blete-blurb-icon-left-square">
                            <div class="blete-icon">
                                <i class="fa fa-edit"></i>
                            </div>

                            <div class="blete-blurb-text">
                                <h3>Easy Edit</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                            </div>
                        </div>

                    </div>
                </div>
                <!-- Features End -->

            </div>
        </div>
    </section>
    <!-- Featuers Section End -->


    <!-- =============================
                    Team Section
    ================================== -->
    <section id="team" class="blete-section-wrapper blete-team-section">
        <div class="container">
            <div class="row">

                <!-- Section Header -->
                <div class="col-md-12 col-sm-12 col-xs-12 blete-section-header wow fadeInDown">
                    <h2>OUR <span class="blete-highlight-text">SOLID</span> TEAM</h2>
                    <div class="blete-section-divider"></div>
                    <p class="col-md-8 col-sm-10 col-xs-12 col-md-offset-2 col-sm-offset-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore culpa hic illo consequuntur at iusto, suscipit, maiores nihil vero obcaecati sunt delectus deleniti atque, labore laborum magni tempore id alias!</p>
                </div>
                <!-- Section Header End -->

                <!-- Team Slider -->
                <div id="team-slider" class="owl-carousel blete-team-carousal col-md-12 col-sm-12 col-xs-12 wow fadeIn" data-wow-duration="2s">

                    <!-- Slides -->
                    <div class="blete-team-slides col-md-12 col-sm-12 col-xs-12">

                        <div class="blete-member-img-wrapper">
                            <img src="images/img-team/team-img-1.png" alt="Team Member 1">
                        </div>

                        <div class="blete-member-details">
                            <h3>John Doe</h3>
                            <span class="blete-member-desg">Web Development</span>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, impedit ducimus illo, minus nemo iste ut sint dolorum magnam nam in, dolorem veritatis. Ipsum voluptatibus, rem fuga nesciunt. In, totam..</p>
                            <ul class="blete-team-social-icon">
                                <li class="social-facebook">
                                    <a href="#"><i class="fa fa-facebook"></i></a>
                                </li>
                                <li class="social-twitter">
                                    <a href="#"><i class="fa fa-twitter"></i></a>
                                </li>
                                <li class="social-gplus">
                                    <a href="#"><i class="fa fa-google-plus"></i></a>
                                </li>
                            </ul>
                        </div>

                    </div>
                    <!-- Slides End -->

                    <!-- Slides -->
                    <div class="blete-team-slides col-md-12 col-sm-12 col-xs-12">

                        <div class="blete-member-img-wrapper">
                            <img src="images/img-team/team-img-2.png" alt="Team Member 2">
                        </div>

                        <div class="blete-member-details">
                            <h3>Marthin Doe</h3>
                            <span class="blete-member-desg">Web Designer</span>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos dolorem repellendus animi veritatis iure odio laudantium, molestiae. Recusandae quisquam sed laudantium et veritatis, blanditiis ad fugiat aperiam quia tempora.</p>
                            <ul class="blete-team-social-icon">
                                <li class="social-facebook">
                                    <a href="#"><i class="fa fa-facebook"></i></a>
                                </li>
                                <li class="social-twitter">
                                    <a href="#"><i class="fa fa-twitter"></i></a>
                                </li>
                                <li class="social-gplus">
                                    <a href="#"><i class="fa fa-google-plus"></i></a>
                                </li>
                            </ul>
                        </div>

                    </div>
                    <!-- Slides End -->

                    <!-- Slides -->
                    <div class="blete-team-slides col-md-12 col-sm-12 col-xs-12">

                        <div class="blete-member-img-wrapper">
                            <img src="images/img-team/team-img-1.png" alt="Team Member 3">
                        </div>

                        <div class="blete-member-details">
                            <h3>Lucas Doe</h3>
                            <span class="blete-member-desg">Marketing</span>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste earum blanditiis doloribus sapiente officiis incidunt vitae aliquam, nulla eos optio fuga possimus, voluptatum impedit omnis? Doloremque ut aliquam unde officiis.</p>
                            <ul class="blete-team-social-icon">
                                <li class="social-facebook">
                                    <a href="#"><i class="fa fa-facebook"></i></a>
                                </li>
                                <li class="social-twitter">
                                    <a href="#"><i class="fa fa-twitter"></i></a>
                                </li>
                                <li class="social-gplus">
                                    <a href="#"><i class="fa fa-google-plus"></i></a>
                                </li>
                            </ul>
                        </div>

                    </div>
                    <!-- Slides End -->

                    <!-- Slides -->
                    <div class="blete-team-slides col-md-12 col-sm-12 col-xs-12">

                        <div class="blete-member-img-wrapper">
                            <img src="images/img-team/team-img-4.png" alt="Team Member 4">
                        </div>

                        <div class="blete-member-details">
                            <h3>Jordi Doe</h3>
                            <span class="blete-member-desg">Web Development</span>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam quae, id cumque reprehenderit est. Facere quaerat reprehenderit maxime distinctio blanditiis laudantium nesciunt ratione cumque pariatur illum eius, non dignissimos eveniet!</p>
                            <ul class="blete-team-social-icon">
                                <li class="social-facebook">
                                    <a href="#"><i class="fa fa-facebook"></i></a>
                                </li>
                                <li class="social-twitter">
                                    <a href="#"><i class="fa fa-twitter"></i></a>
                                </li>
                                <li class="social-gplus">
                                    <a href="#"><i class="fa fa-google-plus"></i></a>
                                </li>
                            </ul>
                        </div>

                    </div>
                    <!-- Slides End -->

                </div>
                <!-- Team Slider End -->
            </div>
        </div>
    </section>
    <!-- Team Section End -->
    <div class="copyrights">Collect from <a href="http://www.cssmoban.com/" >手机网站模板</a></div>


    <!-- =============================
                    Skill Section
    ================================== -->
    <section id="skill" class="blete-our-skills blete-section-wrapper">
        <div class="container">
            <div class="row">

                <!-- Section Header -->
                <div class="col-md-12 col-sm-12 col-xs-12 blete-section-header wow fadeInDown">
                    <h2>OUR <span class="blete-highlight-text">SKILLS</span></h2>
                    <div class="blete-section-divider"></div>
                    <p class="col-md-8 col-sm-10 col-xs-12 col-md-offset-2 col-sm-offset-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, magnam, voluptatem. Eveniet placeat ad, eligendi, sit corporis quo nostrum, soluta tenetur ducimus quis nesciunt repellat explicabo alias est praesentium sapiente.</p>
                </div>
                <!-- Section Header End -->

                <!-- Skills -->
                <div class="blete-skills-wrapper">

                    <div class="col-md-3 col-sm-6 col-xs-12 blete-skill-item">
                        <div class="chart chart-ps" data-percent="95">
                            <span class="percent"></span>
                            <h3>HTML5</h3>
                        </div>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas, nisi hic sapientem.</p>
                    </div>

                    <div class="col-md-3 col-sm-6 col-xs-12 blete-skill-item">
                        <div class="chart chart-php" data-percent="90">
                            <span class="percent"></span>
                            <h3>CSS3</h3>
                        </div>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                    </div>

                    <div class="col-md-3 col-sm-6 col-xs-12 blete-skill-item">
                        <div class="chart chart-js" data-percent="80">
                            <span class="percent"></span>
                            <h3>Javascript</h3>
                        </div>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                    </div>

                    <div class="col-md-3 col-sm-6 col-xs-12 blete-skill-item">
                        <div class="chart chart-wp" data-percent="80">
                            <span class="percent"></span>
                            <h3>PHP</h3>
                        </div>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum assumenda.</p>
                    </div>

                </div>
                <!-- Skills End -->
            </div>
        </div>
    </section>
    <!-- Skill seciton End -->


    <!-- =============================
                Featured Work Section
    ================================== -->
    <section id="featured-works" class="blete-section-wrapper blete-section-work">
        <!-- Container -->
        <div class="container">
            <div class="row">

                <!-- Section Header -->
                <div class="col-md-12 col-sm-12 col-xs-12 blete-section-header wow fadeInDown">
                    <h2>OUR <span class="blete-highlight-text">RECENTS</span> WORKS</h2>
                    <div class="blete-section-divider"></div>
                    <p class="col-md-8 col-sm-10 col-xs-12 col-md-offset-2 col-sm-offset-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi voluptatibus vel natus, deserunt ratione debitis.</p>
                </div>
                <!-- Section Header End -->

            </div>
        </div>
        <!-- Container End -->

        <!-- Featured Works Slider -->
        <div class="container-fluid">
            <div class="row-fluid">

                <div class="blete-portfolio-work-slider-section wow fadeIn" data-wow-duration="2s">
                    <div id="featured-work-slider" class="owl-carousel blete-portfolio-works-slider">

                        <!-- Work 1 -->
                        <div class="blete-portfolio-work-item">

                            <img src="images/img-work/work1.jpg" alt="work">
                            <div class="blete-port-work-details">
                                <ul class="blete-work-meta">
                                    <li class="blete-lighbox"><a href="images/img-work/work1.jpg" class="blete-featured-work-img"><i class="fa fa-search"></i></a></li>
                                </ul>
                            </div>

                        </div>
                        <!-- Work 1 End -->

                        <!-- Work 2 -->
                        <div class="blete-portfolio-work-item">

                            <img src="images/img-work/work2.jpg" alt="work">
                            <div class="blete-port-work-details">
                                <ul class="blete-work-meta">
                                    <li class="blete-lighbox"><a href="images/img-work/work2.jpg" class="blete-featured-work-img"><i class="fa fa-search"></i></a></li>
                                </ul>
                            </div>

                        </div>
                        <!-- Work 2 End -->

                        <!-- Work 3 -->
                        <div class="blete-portfolio-work-item">

                            <img src="images/img-work/work3.jpg" alt="work">
                            <div class="blete-port-work-details">
                                <ul class="blete-work-meta">
                                    <li class="blete-lighbox"><a href="images/img-work/work3.jpg" class="blete-featured-work-img"><i class="fa fa-search"></i></a></li>
                                </ul>
                            </div>

                        </div>
                        <!-- Work 3 End -->

                        <!-- Work 4 -->
                        <div class="blete-portfolio-work-item">

                            <img src="images/img-work/work4.jpg" alt="work">
                            <div class="blete-port-work-details">
                                <ul class="blete-work-meta">
                                    <li class="blete-lighbox"><a href="images/img-work/work4.jpg" class="blete-featured-work-img"><i class="fa fa-search"></i></a></li>
                                </ul>
                            </div>

                        </div>
                        <!-- Work 4 End -->

                        <!-- Work 5 -->
                        <div class="blete-portfolio-work-item">

                            <img src="images/img-work/work5.jpg" alt="work">
                            <div class="blete-port-work-details">
                                <ul class="blete-work-meta">
                                    <li class="blete-lighbox"><a href="images/img-work/work5.jpg" class="blete-featured-work-img"><i class="fa fa-search"></i></a></li>
                                </ul>
                            </div>

                        </div>
                        <!-- Work 5 End -->

                        <!-- Work 6 -->
                        <div class="blete-portfolio-work-item">

                            <img src="images/img-work/work6.jpg" alt="work">
                            <div class="blete-port-work-details">
                                <ul class="blete-work-meta">
                                    <li class="blete-lighbox"><a href="images/img-work/work6.jpg" class="blete-featured-work-img"><i class="fa fa-search"></i></a></li>
                                </ul>
                            </div>

                        </div>
                        <!-- Work 6 End -->

                        <!-- Work 7 -->
                        <div class="blete-portfolio-work-item">

                            <img src="images/img-work/work7.jpg" alt="work">
                            <div class="blete-port-work-details">
                                <ul class="blete-work-meta">
                                    <li class="blete-lighbox"><a href="images/img-work/work7.jpg" class="blete-featured-work-img"><i class="fa fa-search"></i></a></li>
                                </ul>
                            </div>

                        </div>
                        <!-- Work 7 End -->

                    </div>
                </div>
            </div>
        </div>
        <!-- Featured Works Slider -->

    </section>
    <!-- Featured Work End -->



    <!-- =============================
                Portfolio Section
    ================================== -->
    <section id="portfolio" class="blete-portfolio-section">
        <div class="container">
            <div class="row">

                <!-- Section Header -->
                <div class="col-md-12 col-sm-12 col-xs-12 blete-section-header wow fadeInDown">
                    <h2>OUR <span class="blete-highlight-text">PORTFOLIO</span></h2>
                    <div class="blete-section-divider"></div>
                    <p class="col-md-8 col-sm-10 col-xs-12 col-md-offset-2 col-sm-offset-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio, tempora totam qui.</p>
                </div>
                <!-- Section Header End -->

            </div>
        </div>

        <!-- Works -->
        <div class="blete-portfolio-works wow fadeIn" data-wow-duration="2s">

            <!-- Filter Button Start -->
            <div id="blete-portfolio-filter" class="blete-portfolio-filter-btn-group">
                <ul>
                    <li>
                        <a href="#" class="selected" data-filter="*">ALL</a><!-- 
                         --><a href="#" data-filter=".web-design">Web Design</a><!-- 
                         --><a href="#" data-filter=".web-development">Web Responsive</a><!-- 
                         --><a href="#" data-filter=".app-development">PSD</a><!-- 
                         --><a href="#" data-filter=".photography">Clean Design</a>
                    </li>
                </ul>
            </div>
            <!-- Filter Button End -->

            <div class="blete-portfolio-items">

                <!-- Portfolio Items -->
                <div class="item blete-portfolio-item web-design app-development">

                    <img src="images/img-portfolio/portfolio1.jpg">
                    <div class="blete-portfolio-details-wrapper">
                        <div class="blete-portfolio-details">
                            <div class="blete-portfolio-meta-btn">
                                <ul>
                                    <li class="blete-lighbox"><a href="images/img-portfolio/portfolio1.jpg" class="blete-featured-work-img"><i class="fa fa-search"></i></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>

                </div>
                <!-- Portfolio Items End -->

                <!-- Portfolio Items -->
                <div class="item blete-portfolio-item web-development app-development">

                    <img src="images/img-portfolio/portfolio2.jpg">
                    <div class="blete-portfolio-details-wrapper">
                        <div class="blete-portfolio-details">
                            <div class="blete-portfolio-meta-btn">
                                <ul>
                                    <li class="blete-lighbox"><a href="images/img-portfolio/portfolio2.jpg" class="blete-featured-work-img"><i class="fa fa-search"></i></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>

                </div>
                <!-- Portfolio Items End -->

                <!-- Portfolio Items -->
                <div class="item blete-portfolio-item web-design">

                    <img src="images/img-portfolio/portfolio3.jpg">
                    <div class="blete-portfolio-details-wrapper">
                        <div class="blete-portfolio-details">
                            <div class="blete-portfolio-meta-btn">
                                <ul>
                                    <li class="blete-lighbox"><a href="images/img-portfolio/portfolio3.jpg" class="blete-featured-work-img"><i class="fa fa-search"></i></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>

                </div>
                <!-- Portfolio Items End -->

                <!-- Portfolio Items -->
                <div class="item blete-portfolio-item web-design web-development photography">

                    <img src="images/img-portfolio/portfolio4.jpg">
                    <div class="blete-portfolio-details-wrapper">
                        <div class="blete-portfolio-details">
                            <div class="blete-portfolio-meta-btn">
                                <ul>
                                    <li class="blete-lighbox"><a href="images/img-portfolio/portfolio4.jpg" class="blete-featured-work-img"><i class="fa fa-search"></i></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Portfolio Items -->

                <!-- Portfolio Items -->
                <div class="item blete-portfolio-item web-designapp-development photography">

                   <img src="images/img-portfolio/portfolio5.jpg">
                    <div class="blete-portfolio-details-wrapper">
                        <div class="blete-portfolio-details">
                            <div class="blete-portfolio-meta-btn">
                                <ul>
                                    <li class="blete-lighbox"><a href="images/img-portfolio/portfolio5.jpg" class="blete-featured-work-img"><i class="fa fa-search"></i></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>

                </div>
                <!-- Portfolio Items End -->

                <!-- Portfolio Items -->
                <div class="item blete-portfolio-item photography">

                    <img src="images/img-portfolio/portfolio6.jpg">
                    <div class="blete-portfolio-details-wrapper">
                        <div class="blete-portfolio-details">
                            <div class="blete-portfolio-meta-btn">
                                <ul>
                                    <li class="blete-lighbox"><a href="images/img-portfolio/portfolio6.jpg" class="blete-featured-work-img"><i class="fa fa-search"></i></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>

                </div>
                <!-- Portfolio Items End -->

                <div class="item blete-portfolio-item web-development app-development">

                    <img src="images/img-portfolio/portfolio7.jpg">
                    <div class="blete-portfolio-details-wrapper">
                        <div class="blete-portfolio-details">
                            <div class="blete-portfolio-meta-btn">
                                <ul>
                                    <li class="blete-lighbox"><a href="images/img-portfolio/portfolio7.jpg" class="blete-featured-work-img"><i class="fa fa-search"></i></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>

                </div>
                <!-- Portfolio Items End -->

                <!-- Portfolio Items -->
                <div class="item blete-portfolio-item web-design web-development app-development photography">

                    <img src="images/img-portfolio/portfolio8.jpg">
                    <div class="blete-portfolio-details-wrapper">
                        <div class="blete-portfolio-details">
                            <div class="blete-portfolio-meta-btn">
                                <ul>
                                    <li class="blete-lighbox"><a href="images/img-portfolio/portfolio8.jpg" class="blete-featured-work-img"><i class="fa fa-search"></i></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>

                </div>
                <!-- Portfolio Items End -->

                <!-- Portfolio Items -->
                <div class="item blete-portfolio-item app-development">

                    <img src="images/img-portfolio/portfolio9.jpg">
                    <div class="blete-portfolio-details-wrapper">
                        <div class="blete-portfolio-details">
                            <div class="blete-portfolio-meta-btn">
                                <ul>
                                    <li class="blete-lighbox"><a href="images/img-portfolio/portfolio9.jpg" class="blete-featured-work-img"><i class="fa fa-search"></i></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>

                </div>
                <!-- Portfolio Items End -->

                <!-- Portfolio Items -->
                <div class="item blete-portfolio-item photography">

                    <img src="images/img-portfolio/portfolio10.jpg">
                    <div class="blete-portfolio-details-wrapper">
                        <div class="blete-portfolio-details">
                            <div class="blete-portfolio-meta-btn">
                                <ul>
                                    <li class="blete-lighbox"><a href="images/img-portfolio/portfolio10.jpg" class="blete-featured-work-img"><i class="fa fa-search"></i></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>

                </div>
                <!-- Portfolio Items End -->

                <!-- Portfolio Items -->
                <div class="item blete-portfolio-item photography app-development">

                    <img src="images/img-portfolio/portfolio11.jpg">
                    <div class="blete-portfolio-details-wrapper">
                        <div class="blete-portfolio-details">
                            <div class="blete-portfolio-meta-btn">
                                <ul>
                                    <li class="blete-lighbox"><a href="images/img-portfolio/portfolio11.jpg" class="blete-featured-work-img"><i class="fa fa-search"></i></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>

                </div>
                <!-- Portfolio Items End -->

                <!-- Portfolio Items -->
                <div class="item blete-portfolio-item web-design">

                    <img src="images/img-portfolio/portfolio12.jpg">
                    <div class="blete-portfolio-details-wrapper">
                        <div class="blete-portfolio-details">
                            <div class="blete-portfolio-meta-btn">
                                <ul>
                                    <li class="blete-lighbox"><a href="images/img-portfolio/portfolio12.jpg" class="blete-featured-work-img"><i class="fa fa-search"></i></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>

                </div>
                <!-- Portfolio Items End -->

            </div>
        </div>
        <!-- Works End -->


    </section>
    <!-- Portfolio Section End -->

    <!-- =============================
                Custom Section
    ================================== -->
    <section class="blete-custom-sec blete-section-wrapper blete-description">
        <div class="container">
            <div class="row">
                <!-- Section Header -->
                <div class="col-md-12 col-sm-12 col-xs-12 blete-section-header wow fadeInDown">
                    <h2>ADDITIONAL <span class="blete-highlight-text">FEATURES</span></h2>
                    <div class="blete-section-divider"></div>
                    <p class="col-md-8 col-sm-10 col-xs-12 col-md-offset-2 col-sm-offset-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum magnam, atque adipisci dignissimos voluptas libero ipsa nulla perferendis ipsam maxime tenetur eaque, odio labore voluptatum sapiente minus provident voluptate corporis!</p>
                </div>
                <!-- Section Header End -->

                <div class="col-md-6 col-sm-6 col-xs-12 blete-custom-sec-img wow bounceInLeft">
                    <img src="images/features.png" alt="Custom Image">
                </div>

                <div class="col-md-6 col-sm-6 col-xs-12 blete-custom-sec-text wow bounceInRight">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa sit, numquam amet voluptatibus obcaecati ea maiores totam nostrum, ad iure rerum quas harum ipsum. Rem ea ducimus quos quae quo.
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet commodi cumque porro sapiente temporibus, recusandae mollitia, reiciendis tenetur quo natus ab ex quisquam reprehenderit, veniam eius doloremque minus possimus minima.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus at natus praesentium, ea sequi qui facilis odio accusantium ad sit, porro, laborum corporis perspiciatis a earum vel ipsa delectus voluptatem.</p>
                    <ul>
                        <li><i class="fa fa-check"></i>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
                        <li><i class="fa fa-check"></i>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
                        <li><i class="fa fa-check"></i>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
                        <li><i class="fa fa-check"></i>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
                        <li><i class="fa fa-check"></i>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
                    </ul>
                </div>
            </div>
        </div>
    </section>
    <!-- Custom Section End -->


    <!-- =============================
            Testimonial Section
    ================================== -->
    <section id="testimonials" class="blete-testimonial-section">


        <div class="blete-parallax-overlay"></div>

        <div class="blete-testimonial-wrapper wow bounceIn">
            <div class="container">
                <div class="row">

                    <!-- Testimonial Slider -->
                    <div id="blete-testimonial" class="owl-carousel blete-testimonial">

                        <!-- Slides -->
                        <div class="blete-testimonial-slides col-md-8 col-sm-10 col-xs-12 col-md-offset-2 col-sm-offset-1">
                            <img src="images/img-testimonial/testimonial1.png" alt="">
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos ratione consequatur, id ex beatae libero velit alias quibusdam dolorem asperiores aspernatur in, doloribus sint officiis ullam quisquam rem reprehenderit explicabo!</p>
                            <p class="blete-client-info">Joeli Doe</p>
                        </div>
                        <!-- Slides End -->

                        <!-- Slides -->
                        <div class="blete-testimonial-slides col-md-8 col-sm-10 col-xs-12 col-md-offset-2 col-sm-offset-1">
                            <img src="images/img-testimonial/testimonial2.png" alt="">
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus maiores cum culpa corrupti rem itaque in nam, ullam quis possimus eligendi dolorum soluta, aliquid error a nesciunt quam dolor nisi.</p>
                            <p class="blete-client-info">Mata Doe</p>
                        </div>
                        <!-- Slides End -->

                        <!-- Slides -->
                        <div class="blete-testimonial-slides col-md-8 col-sm-10 col-xs-12 col-md-offset-2 col-sm-offset-1">
                            <img src="images/img-testimonial/testimonial3.png" alt="">
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis dolorum cum iure. Excepturi ducimus temporibus neque esse quibusdam veritatis debitis, pariatur id qui distinctio, laborum commodi eligendi aspernatur hic consequatur!</p>
                            <p class="blete-client-info">John Doe</p>
                        </div>
                        <!-- Slides End -->

                        <!-- Slides -->
                        <div class="blete-testimonial-slides col-md-8 col-sm-10 col-xs-12 col-md-offset-2 col-sm-offset-1">
                            <img src="images/img-testimonial/testimonial4.png" alt="">
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti quos rerum, aliquid velit atque, a ducimus iusto consectetur quis, veniam perferendis eum dolores! Temporibus voluptatem corporis natus sunt, soluta, est.</p>
                            <p class="blete-client-info">Juni Doe</p>
                        </div>
                        <!-- Slides End -->

                    </div>
                    <!-- Testimonial Slider End -->

                </div>
            </div>
        </div>
    </section>
    <!-- Testimonial End -->


    <!-- =============================
            Pricing Section
    ================================== -->
    <section id="pricing" class="blete-pricing-section">
        <div class="container">
            <div class="row">

                <!-- Section Header -->
                <div class="col-md-12 col-sm-12 col-xs-12 blete-section-header wow fadeInDown">
                    <h2><span class="blete-highlight-text">PRICING</span></h2>
                    <div class="blete-section-divider"></div>
                    <p class="col-md-8 col-sm-10 col-xs-12 col-md-offset-2 col-sm-offset-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio, nesciunt, placeat esse officia eaque blanditiis nulla explicabo.</p>
                </div>
                <!-- Section Header End -->

                <div class="blete-pricing-wrapper">

                    <!-- Plans -->
                    <div class="col-md-4 col-sm-4 col-xs-12 blete-pricing-plans wow bounceInLeft pricing-plan-one">
                        <div class="blete-pricing-titles">
                            <h2>Simple</h2>
                            <p><span>$50/</span>Month</p>
                        </div>
                        <div class="blete-pricing-service-name">
                            <ul>
                                <li>Free Setup</li>
                                <li>Free Domain 1 Year</li>
                                <li>6 Sub Domain</li>
                                <li>Free 5 Theme</li>
                                <li>Free Support / Week</li>
                                <li>Free Update Theme</li>
                                <li>Free 5 PSD</li>
                            </ul>
                        </div>

                        <a href="#" class="blete-signup-btn">SIGN UP</a>
                    </div>
                    <!-- Plans End -->

                    <!-- Plans -->
                    <div class="col-md-4 col-sm-4 col-xs-12 blete-pricing-plans blete-recommended-pricing wow fadeInUp" data-wow-duration="1s">
                        <div class="blete-pricing-titles">
                            <h2>Standard</h2>
                            <p><span>$80/</span>Month</p>
                        </div>
                        <div class="blete-pricing-service-name">
                            <ul>
                                <li>Free Setup</li>
                                <li>Free Domain 2 Year</li>
                                <li>12 Sub Domain</li>
                                <li>Free 10 Theme</li>
                                <li>24/7 Free Support</li>
                                <li>Free Update Theme</li>
                                <li>Free 10 PSD</li>
                            </ul>
                        </div>

                        <a href="#" class="blete-signup-btn">SIGN UP</a>
                    </div>
                    <!-- Plans End -->

                    <!-- Plans -->
                    <div class="col-md-4 col-sm-4 col-xs-12 blete-pricing-plans wow bounceInRight">
                        <div class="blete-pricing-titles">
                            <h2>Ultimate</h2>
                            <p><span>$150/</span>Month</p>
                        </div>
                        <div class="blete-pricing-service-name">
                            <ul>
                                <li>Free Setup</li>
                                <li>Free Domain 4 Year</li>
                                <li>Unlimited Sub Domain</li>
                                <li>Unlimited Theme</li>
                                <li>24/7 Free Support</li>
                                <li>Free Update Theme</li>
                                <li>Unlimited PSD</li>
                            </ul>
                        </div>

                        <a href="#" class="blete-signup-btn">SIGN UP</a>
                    </div>
                    <!-- Plans End -->

                </div>
            </div>
        </div>
    </section>
    <!-- Pricing End -->


    <!-- =============================
                Contact Section
    ================================== -->
    <section id="contact" class="blete-section-wrapper blete-contact-section" data-stellar-background-ratio="0.5">
    <div class="blete-parallax-overlay"></div>
        <div class="container">
            <div class="row">

                <!-- Section Header -->
                <div class="col-md-12 col-sm-12 col-xs-12 blete-section-header wow fadeInDown blete-section-header-parallax">
                    <h2>CONTACT <span class="blete-highlight-text">US</span></h2>
                    <div class="blete-section-divider"></div>
                    <p class="col-md-8 col-sm-10 col-xs-12 col-md-offset-2 col-sm-offset-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque magni voluptates ipsam.</p>
                </div>
                <!-- Section Header End -->

                <div class="blete-contact-details">

                    <!-- Address Area -->
                    <div class="col-md-5 col-sm-4 col-xs-12 blete-contact-address wow bounceInLeft">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt explicabo nostrum nihil non sapiente quam maiores, eveniet voluptates delectus ipsa itaque. Sit rem fugit accusamus iure consequuntur? Repudiandae, ab ratione..</p>
                        <ul>
                            <li class="blete-office-address"><i class="fa fa-home"></i>4500 Lorem Ipsum<br>Dolor, IL 80237<br>Sit Amet</li>
                            <li class="blete-phone"><i class="fa fa-phone"></i>729-1431-12314</li>
                            <li class="blete-email"><i class="fa fa-envelope-o"></i>info@loremipsum.com</li>
                            <li class="blete-web"><i class="fa  fa-globe"></i>www.loremipsum.com</li>
                        </ul>
                    </div>

                    <!-- Address Area End -->

                    <!-- Contact Form -->
                    <div class="col-md-7 col-sm-8 col-xs-12 blete-contact-form wow bounceInRight">
                        <div id="contact-result"></div>
                        <div id="contact-form">
                            <div class="blete-input-name blete-input-fields">
                                <input type="text" name="name" id="name" placeholder="Name">
                            </div>

                            <div class="blete-input-email blete-input-fields">
                                <input type="email" name="email" id="email" placeholder="Email">
                            </div>

                            <div class="blete-input-message blete-input-fields">
                                <textarea name="message" id="message" cols="30" rows="10" placeholder="Message"></textarea>
                            </div>

                            <input type="submit" value="SEND MESSAGE" id="submit-btn">
                        </div>
                    </div>
                    <!-- Contact Form End -->

                </div>
            </div>
        </div>
    </section>

    <!-- Contact Section End -->


   <!-- =============================
                Footer Section
    ================================= -->
    <footer>
        <div class="container">
            <div class="row">
                <div class="col-md-3">
                    <h3>About</h3>
                    <ul>
                        <li><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum vitae nihil, culpa nemo dolore explicabo ipsa? Qui, et, porro. Nemo officiis possimus assumenda quia reiciendis asperiores aliquam quae minima, eos.</span></li>
                    </ul>
                </div>
                <div class="col-md-3">
                    <h3>Related Post</h3>
                    <ul>
                        <li><a href="">lorem ipsum</a></li>
                        <li><a href="">lorem</a></li>
                        <li><a href="">lorem dolor</a></li>
                        <li><a href="">lorem</a></li>
                        <li><a href="">lorem</a></li>
                    </ul>
                </div>
                <div class="col-md-3">
                    <h3>Page</h3>
                    <ul>
                        <li><a href="">lorem</a></li>
                        <li><a href="">lorem sit eta</a></li>
                        <li><a href="">lorem</a></li>
                        <li><a href="">lorem lorem ipsum</a></li>
                        <li><a href="">lorem ipsumlor</a></li>
                    </ul>
                </div>
                <div class="col-md-3">
                    <h3>Featured Post</h3>
                    <ul>
                        <li><a href="">lorem meta tag</a></li>
                        <li><a href="">lorem intan sipsum</a></li>
                        <li><a href="">lorem ipsum</a></li>
                        <li><a href="">lorem</a></li>
                        <li><a href="">lorem mata</a></li>
                    </ul>
                </div>
            </div>
        </div>

    </footer>
    <!-- Footer End -->
    <div class="thn">
         <div class="container thn">
            <div class="row">
                <div class="blete-footer-content">

                    <h6 class="blete-copyright-info">©2015 More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></h6>

                </div>
            </div>
        </div>
    </div>


    <!-- =============================
                SCRIPTS
    ================================== -->
    <script src="js/jquery-1.11.3.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/modernizr.min.js"></script>
    <script src="js/jquery.easing.1.3.js"></script>
    <script src="js/jquery.scrollUp.min.js"></script>
    <script src="js/jquery.easypiechart.js"></script>
    <script src="js/jquery.countTo.js"></script>
    <script src="js/isotope.pkgd.min.js"></script>
    <script src="js/jflickrfeed.min.js"></script>
    <script src="js/jquery.fitvids.js"></script>
    <script src="js/jquery.stellar.min.js"></script>
    <script src="js/jquery.waypoints.min.js"></script>
    <script src="js/wow.min.js"></script>
    <script src="js/jquery.nav.js"></script>
    <script src="js/imagesloaded.pkgd.min.js"></script>
    <script src="js/smooth-scroll.min.js"></script>
    <script src="js/jquery.magnific-popup.min.js"></script>
    <script src="js/jquery.sliderPro.min.js"></script>
    <script src="js/owl.carousel.min.js"></script>
    <script src="js/custom.js"></script>

</body>
</html>
